<template>
  <div class="box" v-show="isshow" @click.stop>
    <!-- 手机号登录 -->
    <div class="numberloginbox" @click.stop>
      <div class="numberlogin" @click.stop>
        <div class="top">
          <p class="textleft">手机号登录</p>
          <p class="textright" @click="closebox">×</p>
        </div>
        <div class="body">
          <div class="inputbox">
            <div class="inputbox1">
              <div class="userbox">
                <select>
                  <option>+86</option>
                </select>
                <input type="text" v-model="usernumber" class="userinput" />
              </div>
              <div class="pwdbox">
                <!-- 密码输入框 -->
                <input
                  type="password"
                  v-model="password"
                  class="pwdinput"
                  v-show="ismsm"
                />
                <!-- 短信输入框 -->
                <input
                  type="text"
                  v-model="msm"
                  class="msminput"
                  v-show="ispwd"
                />
                <!-- 验证码发送按钮 -->
                <p class="getmsm" v-show="isgetmsm" @click="getmsm">
                  获取验证码
                </p>
                <!-- 验证码定时器 -->
                <p class="getmsm" v-show="istime">{{ timenum }}s</p>
              </div>
              <div class="logintype">
                <p class="pleft" @click="chuangemsm" v-show="ismsm">短信登录</p>
                <p class="pleft" @click="chuangepwd" v-show="ispwd">密码登录</p>
                <p class="prigth"></p>
              </div>
              <div class="btnbox">
                <!-- 登录按钮 -->
                <p class="loginbtn" @click="userlogin">登录</p>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  setup () {},
  data () {
    return {
      isshow: false,
      // 手机号码input
      usernumber: '',
      // 密码input
      password: '',
      // 验证码input
      msm: '',
      // 验证码登录的窗口
      ismsm: true,
      // 密码登录的状况
      ispwd: false,
      // 获取验证码的按钮
      isgetmsm: false,
      // 倒计时窗口
      istime: false,
      // 定时器计数
      timenum: 60,
      // 判断是密码登录还是验证码登录
      pwdORmsm: 1,
      // 用户id
      userid: 0,
      userdata: {}
    }
  },
  methods: {
    closebox () {
      this.isshow = false
      this.$bus.$emit('loginclose')
    },
    // 登入事件
    userlogin () {
      if (this.pwdORmsm) {
        this.pwdlogin()
      } else {
        this.ValidationMSM()
      }
    },
    // 点击验证码登录
    chuangemsm () {
      this.ismsm = false
      this.ispwd = true
      this.isgetmsm = true
      this.pwdORmsm = 0
    },
    // 点击密码登录
    chuangepwd () {
      this.ismsm = true
      this.ispwd = false
      this.isgetmsm = false
      this.pwdORmsm = 1
    },
    // 获取验证码
    getmsm () {
      this.isgetmsm = false
      this.istime = true
      this.maxaxios
        .get('/captcha/sent', { phone: this.usernumber })
        .then((res) => {
          console.log(res)
          if (res.code === 200) {
            let number = 60
            const t = setInterval(() => {
              number--
              this.timenum = number
              if (number === 0) {
                clearInterval(t)
                this.isgetmsm = true
                this.istime = false
              }
            }, 1000)
          } else {
            alert('验证码获取失败')
            this.isgetmsm = true
            this.istime = false
          }
        })
    },
    // 短信验证模块
    // 成功获取短信但不获取用户信息
    // ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
    ValidationMSM () {
      this.maxaxios
        .get(
          '/captcha/verify', { phone: this.usernumber, captcha: this.msm }
        )
        .then((res) => {
          console.log(res)
          // console.log("验证码登录", res.data);
          if (res.code === 200) {
            // 获取用户详细信息
            // this.getuserdata();
            alert('登录成功')
            // 获取登录状态
            // this.loginstate();
            // 登录成功隐藏登录框
            this.isshow = false
            this.$bus.$emit('LoginSuccess')
          } else {
            alert('验证码错误')
          }
        })
    },
    // 密码登录模块
    pwdlogin () {
      this.$axios
        .get(
          '/login/cellphone', { phone: this.usernumber, password: this.password }
        )
        .then((res) => {
          console.log('密码登录', res.data)
          if (res.data.code === 400) {
            alert('密码错误')
          } else if (res.code === 200) {
            // 获取用户详细信息
            // this.getuserdata();
            alert('登录成功')
            this.userid = res.account.id
            // 获取登录状态
            // this.loginstate();
            // 登录成功隐藏登录框
            this.isshow = false
            this.$bus.$emit('LoginSuccess')
            this.$store.state.useerlogin = true
          }
        })
    },
    // 获取登录状态
    loginstate () {
      this.$axios.get('/login/status').then((res) => {
        console.log(res)
      })
    },
    // 获取用户信息
    getuserdata () {
      this.$axios
        .get('/user/detail', { uid: this.userid })
        .then((res) => {
          console.log('用户信息', res)
          this.userdata = res
          // 隐藏登录按钮
          this.$bus.$emit('hiddenbtn', this.userdata.profile.avatarUrl)
        })
    }
  },
  mounted () {
    this.$bus.$on('numberlogin', (res) => {
      this.isshow = !this.isshow
    })
  }
}
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
}
.numberloginbox {
  width: 100%;
  height: 100%;
  position: relative;
}
.numberlogin {
  width: 500px;
  height: 300px;
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  box-shadow: 0 5px 16px rgb(0 0 0 / 80%);
}
.top {
  width: 100%;
  height: 40px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #2d2d2d;
}
.textleft {
  margin-left: 20px;
  width: 80px;
  line-height: 40px;
  float: left;
  color: white;
  font-weight: bold;
}
.textright {
  float: right;
  width: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  font-size: 20px;
  color: #888888;
}
.body {
  width: 100%;
  height: 210px;
}
.inputbox {
  width: 50%;
  height: 210px;
  margin: auto;
}
.inputbox1 {
  width: 100%;
  padding-top: 30px;
  /* background-color: #a49999; */
}
.userbox {
  width: 80%;
  margin: auto;
  height: 30px;
  /* background-color: #2d2d2d; */
  border: #cdcdcd solid 1px;
  box-sizing: border-box;
}
.userbox select {
  width: 48px;
  height: 28px;
  border: none;
  outline: none;
  border-right: #cdcdcd solid 1px;
}
.userinput {
  width: 148px;
  line-height: 27px;
  border: none;
  outline: none;
}
.pwdbox {
  width: 80%;
  height: 30px;
  margin: auto;
  margin-top: 10px;
}
.pwdbox::after {
  content: "";
  clear: both;
  display: block;
}
.pwdinput {
  width: 200px;
  line-height: 28px;
  border: #cdcdcd solid 1px;
  outline: none;
  box-sizing: border-box;
}
.msminput {
  width: 120px;
  line-height: 28px;
  border: #cdcdcd solid 1px;
  outline: none;
  box-sizing: border-box;
  float: left;
}
.getmsm {
  width: 70px;
  line-height: 28px;
  text-align: center;
  /* background-color: rgb(186, 41, 167); */
  float: right;
  font-size: 12px;
  border: 1px solid #cdcdcd;
  cursor: pointer;
}
.logintype {
  width: 80%;
  height: 30px;
  margin: auto;
  margin-top: 20px;
}
.pleft {
  width: 30%;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  color: #666666;
}
.logintype::after {
  content: "";
  clear: both;
  display: block;
}
.btnbox {
  width: 80%;
  height: 30px;
  margin: auto;
  margin-top: 20px;
}
.loginbtn {
  width: 80%;
  margin: auto;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
  background-color: #11999e;
  color: #e4f9f5;
}
.bottom {
  width: 100%;
  height: 50px;
  background-color: rgba(209, 73, 73, 0.067);
}
</style>
